<template>
  <div class="container-mobile">
    <div class="page-title">
      {{ t('crew.pt') }}
    </div>
    <Banner bannerModel="7" />

    <div class="banner-title">
      <span
        :class="{ active: activeIndex == 1 }"
        @click="activeIndex = 1"
        >{{ t('crew.i_t1') }}</span
      >
      <span
        :class="{ active: activeIndex == 2 }"
        @click="activeIndex = 2"
        >{{ t('crew.i_t2') }}</span
      >
    </div>
    <div
      class="g-con-m"
      v-if="activeIndex == 1"
    >
      <el-row class="row-style">
        <el-col
          :span="12"
        >
          <el-select
            :placeholder="t('crew.u1')"
            class="wp-100"
            v-model="queryForm.crewLocation"
            clearable
            filterable
          >
            <el-option
              v-for="item in countryOptionList"
              :key="item.id"
              :label="item.countryName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col
          :span="11"
          :offset="1"
        >
          <el-select
            v-model="queryForm.duties"
            :placeholder="t('crew.u3')"
            class="wp-100"
            clearable
            filterable
          >
            <el-option
              v-for="item in dictData.duties"
              :key="item.dictCode"
              :label="item.dictLabel"
              :value="item.dictCode"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col
          :span="24"
          class="mt-2"
        >
          <el-button
            type="primary"
            class="btn-size"
            @click="addCrewFn"
          >
            {{ t('crew.i_b1') }}
          </el-button>
        </el-col>
        <el-col
          :span="24"
          class="mt-2"
        >
          <el-date-picker
            @change="dateChange($event, 'nextSignOnDate')"
            style="width: 100%"
            v-model="queryForm.nextSignOnDate"
            type="datetime"
            :placeholder="t('crew.f1')"
          />
        </el-col>
        <el-col
          :span="24"
          class="mt-2 mb-2"
        >
          <el-button
            type="primary"
            class="find btn-size"
            @click="onQuery"
            >{{ t('crew.i_b2_1') }}</el-button
          >
        </el-col>
      </el-row>
      <ul class="list">
        <li
          v-for="(item, index) in crewList"
          :key="index"
          class="item"
          @click="detailLink(item)"
        >
          <el-row>
            <el-col :span="24">
              <img :src="item.headSculpture" height="180" />
            </el-col>
            <el-col
              :span="24"
              class="name line-1"
              >{{ item.crewName }}</el-col
            >
            <el-col
              :span="24"
              class="country"
              >{{ item.crewLocation }}</el-col
            >
            <el-col
              :span="24"
              class="experience"
              >{{ getDictLabel('duties', item.duties) }}</el-col
            >
            <el-col
              :span="24"
              class="status"
            >
              <div>
                <p
                  v-for="child in dictData.resume_work_status"
                  :key="child"
                >
                  <span v-if="child.dictValue == item.crewStatus">
                    {{ child.dictLabel }}
                  </span>
                </p>
              </div>
            </el-col>
          </el-row>
        </li>
      </ul>
      <div class="flexcc mt-3">
        <el-pagination
          layout="prev, pager, next"
          :total="crewTotal"
          v-model:current-page="crewPage.pageNum"
          :page-size="crewPage.pageSize"
          @current-change="crewHandleCurrentChange"
        >
        </el-pagination>
      </div>
    </div>
    <div
      class="g-con-m"
      v-if="activeIndex == 2"
    >
      <el-row class="row-style">
        <el-col
          :span="12"
        >
          <el-select
            :placeholder="t('crew.recruit.l3')"
            class="wp-100"
            v-model="recuitQueryForm.crewLocation"
            clearable
            filterable
          >
            <el-option
              v-for="item in countryOptionList"
              :key="item.id"
              :label="item.countryName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col
          :span="11"
          :offset="1"
        >
          <el-select
            v-model="recuitQueryForm.recruitDuties"
            :placeholder="t('crew.recruit.l1')"
            class="wp-100"
            clearable
            filterable
          >
            <el-option
              v-for="item in dictData.duties"
              :key="item.dictCode"
              :label="item.dictLabel"
              :value="item.dictCode"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col
          :span="24"
          class="mt-2"
        >
          <el-button
            type="primary"
            class="btn-size"
            @click="toJobPosting"
          >
            {{ t('crew.i_b3') }}
          </el-button>
        </el-col>
        <el-col
          :span="24"
          class="mt-2"
        >
          <el-select
            v-model="recuitQueryForm.shippingType"
            :placeholder="t('crew.recruit.l4')"
            class="wp-100"
            clearable
            filterable
          >
            <el-option
              v-for="item in dictData.ships_type"
              :key="item.dictCode"
              :label="item.dictLabel"
              :value="item.dictCode"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col
          :span="24"
          class="mt-1 mb-2"
        >
          <el-button
            type="primary"
            class="find btn-size"
            @click="getRecuitListFn"
            >{{ t('crew.i_b2_2') }}</el-button
          >
        </el-col>
      </el-row>

      <ul class="recruit-list">
        <li
          v-for="item in recuitList"
          :key="item"
          class="item"
          @click="openUrl('/mRecruitmentDetails', { id: item.id } )"
        >
          <div class="item-left">
            <img
              :src="item.enterpriseLogo"
              alt=""
            />
          </div>
          <div class="item-right flexsc-col">
            {{ getDictLabel('duties', item.recruitDuties) }}
            <!-- <p class="people">{{ t('crew.un2') }} {{ item.recruitNumber }} {{ t('crew.un1') }}</p> -->
            <p class="location flexec">
              {{ item.crewLocation }}
              <img
                src="@/assets/img/icon_dizhi_a.png"
                alt=""
                style="wdith: 14px; height: 18px"
              />
            </p>
          </div>
        </li>
      </ul>

      <div class="flexcc mt-3">
        <el-pagination
          layout="prev, pager, next"
          :total="recuitTotal"
          v-model:current-page="recuitPage.pageNum"
          :page-size="recuitPage.pageSize"
          @current-change="recuitHandleCurrentChange"
        >
        </el-pagination>
      </div>
    </div>
    <!-- <el-dialog title="招聘需求" width="100%" v-model="dialogRecruit">
            <el-form class="dialog-form" id="form">
                <el-form-item >
                    <el-select v-model="recruitFrom.recruitDuties">
                        <el-option
                                 v-for="item in dictData.duties"
                                :key="item.dictCode"
                                :label="item.dictLabel"
                                 :value="item.dictCode">
                            </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item >
                    <el-input v-model="recruitFrom.recruitNumber"></el-input>
                </el-form-item>
                <el-form-item >
                    <el-select v-model="recruitFrom.crewLocation">
                        <el-option v-for="item in countryOptionList" :key="item.id" :label="item.countryName" :value="item.id">
                            </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item >
                    <el-select v-model="recruitFrom.shippingType">
                        <el-option
                                 v-for="item in dictData.ships_type"
                                :key="item.dictCode"
                                :label="item.dictLabel"
                                 :value="item.dictCode">
                            </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item >
                    <el-input v-model="recruitFrom.deadweightTon"></el-input>
                </el-form-item>
                <el-form-item >
                    <el-input v-model="recruitFrom.navigationArea"></el-input>
                </el-form-item>
                <el-form-item >
                    <el-select v-model="recruitFrom.gender">
                        <el-option
                             v-for="item in dictData.sys_user_sex"
                             :key="item.dictCode"
                             :label="item.dictLabel"
                             :value="item.dictCode"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item >
                    <el-input-number v-model="recruitFrom.age" :max="65" :min="18" style="width:100%"></el-input-number>
                </el-form-item>
                <el-form-item >
                    <el-input v-model="recruitFrom.recruitIllustrate" type="textarea" resize="none" :autosize="{minRows:6,maxRows:6}"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" style="margin-left:40%;" @click="addSave">
                    提交
                </el-button>
            </div>
        </el-dialog> -->
  </div>
</template>
<script setup>
import { onMounted, ref, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { listPage, getRecuitList, addRecuit } from '@/service/crew.js'
import { countryListApi } from '@/service/common.js'
import useDict from '@/hooks/useDict'
import Banner from '@/components/Banner.vue'
import useLogin from '@/stores/login'
import { getOrganization } from '@/service/organizationStructure'
import { openUrl } from '@/utils'

import { showSuccessToast, showFailToast } from 'vant'
import 'vant/es/toast/style'

const storeLogin = useLogin()

const router = useRouter()

const { dictData, getDictData, getDictLabel } = useDict()
const recruitFrom = ref({
  // enterpriseId: JSON.parse(localStorage.getItem('login')).userInfo.enterpriseId
})
const { t, locale } = useI18n()
const dialogRecruit = ref(false)
const countryOptionList = ref([])
const crewList = ref([])
const recuitList = ref([])
const activeIndex = ref(1)

const isViewResume = ref(false)

// 企业信息
const getOrganizationInfoFn = () => {
  if (!storeLogin?.userInfo?.enterpriseId) return
  getOrganization(storeLogin.userInfo.enterpriseId).then(({ data }) => {
    isViewResume.value = data.viewResumeFlag === '1'
  })
}

const addCrewFn = () => {
  if (!storeLogin.userInfo?.id) {
    showFailToast(t('needLogin'))
    return
  }
  if (!['15'].includes(storeLogin.userInfo.customerClassCode)) {
    showFailToast(t('noPermission'))
    return
  }
  openUrl('/addCrewResume', { pageType: 'add' } )
}
const toJobPosting = () => {
  if (!storeLogin.userInfo?.id) {
    showFailToast(t('needLogin'))
    return
  }
  openUrl('/mJobPosting')
}
const addSave = () => {
  addRecuit(recruitFrom.value).then(({ msg }) => {
    recruitFrom.value = { enterpriseId: JSON.parse(localStorage.getItem('login')).userInfo.enterpriseId }
    dialogRecruit.value = false
    showSuccessToast(msg)
  })
}

const onQuery = () => {
  queryForm.value.pageNum = 1
  getList()
}
const queryForm = ref({
  crewLocation: undefined,
  duties: undefined,
  nextSignOnDate: undefined
})
const crewPage = ref({
  pageNum: 1,
  pageSize: 8
})
const crewTotal = ref(0)
const getList = () => {
  listPage(crewPage.value, queryForm.value).then(({ rows, total }) => {
    rows.forEach((item) => {
      if (!isViewResume.value) {
        item.crewName = `*${item.crewName.substr(1)}`
      }
    })
    crewList.value = rows
    crewTotal.value = total
  })
}
// 分页
const crewHandleCurrentChange = (val) => {
  getList()
}

const detailLink = (item) => {
  openUrl('/crewResume', { id: item.id } )
}
const dateChange = (val, key) => {
  if (val) {
    // 10位时间戳
    queryForm.value[key] = String(val).substring(0, 10) * 1
  } else {
    queryForm.value[key] = null
  }
}

//
const recuitQueryForm = ref({
  crewLocation: undefined,
  duties: undefined,
  shippingType: undefined
})
const recuitPage = ref({
  pageNum: 1,
  pageSize: 8
})
const recuitTotal = ref(0)
const getRecuitListFn = () => {
  getRecuitList({ ...recuitPage.value, ...recuitQueryForm.value }).then(({ rows, total }) => {
    recuitList.value = rows
    recuitTotal.value = total
  })
}
// 分页
const recuitHandleCurrentChange = (val) => {
  getRecuitListFn()
}

// const dictData = ref({})
// const getDictData = async (dictType) => {
//   await dictDataApi({ dictType }).then(({ data }) => {
//     dictData.value[dictType] = data
//   })
// }
const init = async () => {
  await getOrganizationInfoFn()
  getList()
  getRecuitListFn()
  countryListApi().then((res) => {
    countryOptionList.value = res.data
  })
  getDictData('resume_work_status')
  getDictData('duties')
  getDictData('ships_type')
  getDictData('sys_user_sex')
}
onMounted(() => {
  init()
})
</script>
<style scoped lang="scss">
.container-mobile {
  .page-title {
    background: #252628;
    color: #fff;
    padding: 12px 20px;
    font-weight: bold;
  }

  .banner-title {
    width: 100%;
    height: 60px;
    line-height: 60px;
    border-bottom: 2px solid rgba(234, 235, 236, 1);
    font-size: 20px;

    font-weight: bold;
    color: #ca2a02;
    margin-bottom: 22px;
    display: flex;
    span {
      flex: 1;
      text-align: center;
      color: rgba(106, 105, 115, 1);
    }
    .active {
      color: #ca2a02;
      border-bottom: 4px solid rgba(202, 42, 2, 1);
    }
  }
  .g-con-m {
    width: 100%;
    min-height: 300px;

    .row-style {
      width: 100%;
      margin-top: 20px;
      // height: 300px;

      :deep(.el-input__inner) {
        // background: rgba(245, 245, 245, 1);
        // height: 90px;
      }
      :deep(.el-input__wrapper) {
        height: 42px;
        background: rgba(245, 245, 245, 1);
      }
      :deep(.btn-size) {
        width: 100%;
        height: 40px;
        line-height: 40px;
        // font-size: 28px;
        //
        // font-weight: 400;
        // span{
        //     font-size: 28px;
        // }
      }
      .find {
        background: #252628;
        font-size: 12px;
        //
        // font-weight: bold;
        color: #ffffff;
        border: 2px solid #252628;
      }
      :deep(.el-input__wrapper) {
        width: 100%;
      }
    }

    .list {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(2, calc(50% - 5px));
      gap: 10px;

      .item {
        // height: 400px;
        background: rgba(245, 245, 245, 1);
        margin-bottom: 10px;
        .el-col {
          img {
            width: 100%;
            height: 120px;
            object-fit: contain;
            background: #252628;
          }
          text-align: center;
        }

        .name {
          margin-top: 10px;
          font-size: 16px;
          color: #252628;
          font-weight: bold;
        }

        .status {
          font-size: 14px;

          font-weight: 400;
          color: #ca2a02;
          margin-top: 20px;
          div {
            height: 36px;
            background: rgb(243, 178, 162);
            font-size: 12px;
            line-height: 30px;
          }
        }

        .country {
          margin-top: 5px;
          color: #252628;
        }

        .experience {
          font-size: 14px;

          font-weight: 400;
          color: #01358d;
        }
      }
    }

    .recruit-list {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      .item {
        width: 100%;
        display: flex;
        padding: 15px;
        // height: 190px;
        background: rgba(245, 245, 245, 1);
        margin-bottom: 10px;
        .item-left {
          width: 140px;
          height: 140px;

          img {
            width: 100%;
            height: 100%;
          }
        }

        .item-right {
          flex: 1;
          margin-left: 15px;
          .title {
            font-size: 18px;

            font-weight: bold;
            color: #252628;
            margin-bottom: 14px;
          }

          .people {
            font-size: 14px;

            font-weight: 400;
            color: #6a6973;
            line-height: 44px;
          }

          .location {
            font-size: 14px;
            width: 100%;
            font-weight: 400;
            color: #6a6973;
            line-height: 26px;
            display: flex;
            justify-content: end;
            img {
              margin-left: 6px;
              margin-top: -4px;
            }
          }
        }
      }
    }
  }
}
:deep(.el-dialog__title) {
  color: rgba(202, 42, 2, 1);
}
.dialog-form {
  :deep(.el-input__inner) {
    height: 40px;
  }
  :deep(.el-select) {
    width: 100%;
  }
}
</style>
